<template lang='pug'>
  .mine-plan
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 24 }" :lg="{ span: 16 }" :xl="{ span: 10 }" :xxl="{span: 8}")
          span.label-txt.w80 时间范围：
          DatePicker.input-has-border(type="daterange" placeholder="请选择日期" separator="至" @on-change="timeChange")
          Button.ml-15(type="info" @click="checkBtn") 查询
        Col.pr-20.mb-15(:md="{ span: 24 }" :lg="{ span: 24 }" :xl="{ span: 14 }" :xxl="{span: 16}")
          .d-flex
            Button.ml-15(type="info" @click="openModal") 新建工作计划
            Button.ml-15(type="info" @click="openSaveTaskModal") 新建完成任务
            Button.ml-15(type="info" @click="openBatchConfirmModal") 确认完成
            Button.ml-15(type="info" @click="deleteBtn") 删除
    Table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData" @on-selection-change="tableSelectChange")
      template(slot-scope="{ row, index }" slot="action")
        Button.mr-5(type="text" size="small" @click="revisePlanBtn(row.id)") 修改
      .clearfix.pl-20.pr-20(slot="footer")
        Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
    createsPlan(ref="createsPlanModal" :planClassifyList="planClassifyList" :customerList="customerList" :beginTime="createBeginTime" @get-list="checkBtn")
    saveTask(ref="saveTaskModal" @get-list="checkBtn")
    batchConfirm(ref="batchConfirmModal" :ids="ids" @get-list="checkBtn")
    revisePlan(ref="revisePlanModal" :detailSpinShow="detailSpinShow" :planClassifyList="planClassifyList" :customerList="customerList" :formValidate="formValidate" @get-list="checkBtn")
</template>
<script>
import createsPlan from '../modal/createsPlans.vue'
import saveTask from '../modal/saveTask.vue'
import batchConfirm from '../modal/batchConfirm.vue'
import revisePlan from '../modal/revisePlan.vue'
import WorkScheduleApi from '@/api/WorkSchedule.api.js'
export default {
  name:'mine-plan',
  props:{},
  data () {
    return {
      detailSpinShow: true,
      formValidate: {}, // 计划详情
      loading: false,
      beginTime: '',
      endTime: '',
      listData: [],
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '开始',
          minWidth: 190,
          align: 'center',
          render: (h, params) => {
            let row = params.row
            let times = row.beginTime.slice(0, 16).replace(/T/g, ' ')
            return h('span', times)
          }
        },
        {
          title: '结束',
          minWidth: 190,
          align: 'center',
          render: (h, params) => {
            let row = params.row
            let times = row.endTime.slice(0, 16).replace(/T/g, ' ')
            return h('span', times)
          }
        },
        {
          title: '计划分类',
          minWidth: 120,
          align: 'center',
          key: 'planTypeName'
        },
        {
          title: '关联客户',
          minWidth: 150,
          align: 'center',
          key: 'customerName'
        },
        {
          title: '计划详情',
          minWidth: 200,
          align: 'center',
          tooltip: true,
          key: 'content'
        },
        {
          title: '完成时间',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            let row = params.row
            let text = ''
            if (row.type === 2) {
              text =row.endTime.slice(0, 16).replace(/T/g, ' ')
            } else if (row.type === 1 && row.status === 2) {
              text = row.complete_EndTime.slice(0, 16).replace(/T/g, ' ')
            } else {
              text = ''
            }
            return h('span', text)
          }
        },
        {
          title: '完成情况',
          minWidth: 150,
          align: 'center',
          key: 'statusName'
        },
        {
          title: '操作',
          minWidth: 150,
          align: 'center',
          slot: 'action'
        }
      ],
      planClassifyList: [], // 工作计划类型
      customerList: [], // 关联客户
      ids: '',
      createBeginTime: '',
      codeTotal: 0,
      PageIndex: 1,
      PageSize: 10
    }
  },

  components: {
    createsPlan,
    saveTask,
    batchConfirm,
    revisePlan
  },

  watch: {},
  computed: {},

  beforeMount() {},

  mounted() {
    this.getPlanClassifyList()
    this.getCustomerList()
    this.getList()
  },

  methods: {
    openModal () {
      this.$refs.createsPlanModal.show()
      this.createBeginTime = this.getCreateBeginTime()
    },
    openSaveTaskModal () {
      this.$refs.saveTaskModal.show()
    },
    openBatchConfirmModal () {
      if (this.ids) {
        this.$refs.batchConfirmModal.show()
      } else {
        this.$Message.warning('请选择您需要处理的工作计划')
      }
    },
    checkBtn () {
      this.ids = ''
      this.PageIndex = 1
      this.getList()
    },
    revisePlanBtn (id) {
      this.$refs.revisePlanModal.show()
      this.detailSpinShow = true
      WorkScheduleApi.GetModel({
        id: id
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.detailSpinShow = false
          this.formValidate = {
            id: res.data.data.id,
            beginDate: this.$moment(res.data.data.beginTime).format('YYYY-MM-DD'), // 开始日期
            beginTime: this.$moment(res.data.data.beginTime).format('HH:mm'), // 开始时间
            endDate: this.$moment(res.data.data.endTime).format('YYYY-MM-DD'), // 结束日期
            endTime: this.$moment(res.data.data.endTime).format('HH:mm'), // 结束时间
            type: res.data.data.type, // 类型：1工作计划,2完成任务,3系统完成任务
            planTypeId: res.data.data.planTypeId, // 计划分类
            customerGUID: res.data.data.customerGUID, // 关联客户
            content: res.data.data.content // 计划详情
          }
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    getList () {
      this.loading = true
      WorkScheduleApi.GetPlanList({
        beginTime: this.beginTime,
        endTime: this.endTime,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },

    // 获取计划分类
    getPlanClassifyList () {
      WorkScheduleApi.GetPlanClassifyList().then(res => {
        if (res.data.success) {
          this.planClassifyList = res.data.data
        }
      })
    },
    // 获取关联客户
    getCustomerList () {
      WorkScheduleApi.GetCustomerList({
        HasPaging: false
      }).then(res => {
        if (res.data.success) {
          this.customerList = res.data.data
        }
      })
    },
    tableSelectChange (val) {
      let arr = val.map((item) => {
        return item.id
      })
      this.ids = arr.join(',')
    },
    deleteBtn () {
      if (this.ids) {
        this.$Modal.confirm({
          title: '确定删除？',
          onOk: () => {
            WorkScheduleApi.Delete({
              id: this.ids
            }).then(res => {
              this.$Message.success(res.data.message)
              this.checkBtn()
            })
          },
          onCancel: () => {}
        })
      } else {
        this.$Message.warning('请选择您需要处理的工作计划')
      }
    },

    timeChange (val) {
      if (val) {
        this.beginTime = val[0]
        this.endTime = val[1]
      }
    },
    getCreateBeginTime () {
      const start = this.$moment(this.$moment(new Date()).format('YYYY-MM-DD HH:mm'))
      const remainder = 30 - (start.minute() % 30)
      const time = this.$moment(start).add(remainder, "minutes").format("HH:mm")
      return time
    },
    pageChangeFn (val) {
      this.ids = ''
      this.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.ids = ''
      this.PageSize = val
      this.getList()
    }
  }


}

</script>
<style lang='less' scoped>
  .d-flex{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
</style>